<template>
    <div class="center-section-content">
        <div class="device-tabs">
            <div
                    v-for="device in deviceList"
                    :key="device.id"
                    :class="['device-tab', { active: activeDevice === device.id }]"
                    @click="handleDeviceClick(device)"
            >
                    <div class="tab-type">{{ device.type }}</div>
                    <span>{{ device.name }}</span>
<!--                    <span>-</span>-->
<!--                    <span class="fonts-DIN"></span>-->
          
            </div>
        </div>
    </div>
</template>

<script>
    import {EventBus} from "../../utils/event-bus";
    // import coordtransform from 'coordtransform'
    // 在组件中直接导入JSON文件
    import jsonData from '@/assets/niaolei.json';
    import zhenxizhiwu from '@/assets/zhenxizhiwu.json';
    import AMapLoader from "@amap/amap-jsapi-loader";
    let that;
    export default {
        name: 'Center',
        data() {
            return {
                activeDevice: 'niaolei',
                myData: jsonData,
                zhenxizhiwu:zhenxizhiwu,
                heatPoint:{data:[],max:0},
                deviceList: [
                    { id: 'niaolei', name: '鸟类',total: 0, deviceData: '',type: '',description:'截至2025年6月，上海植物园共观察到鸟类180种，主要分布在树木茂密、果实丰富的林间，以及便于躲避、食源充足的水边。其中有国家重点保护鸟类如凤头鹰、赤腹鹰、灰脸鵟鹰、红隼、红嘴相思鸟等。也包含了上海常见鸟类“四大金刚”：乌鸫、白头鹎、珠颈斑鸠和麻雀。' },
                    { id: 'binweizhiwu', name: '濒危树木',total: 0, deviceData: '',type: '' ,description:'上海植物园有植物1.05万种（含品种），其中树木828种，约2万株。珍稀濒危树木77种，约3600株，主要分布在南区的水杉大道、环保植物区、松柏园等区域，北区较少。濒危树木中，水杉数量最多，有1317株，其次为银杏，有760株，再次为榧树，有568株。'},
                ],
                devices: [],
                total: 0
            }
        },
        created() {
            that=this;
        },
        mounted() {
            EventBus.$emit('set-fullScreen', true);
            setTimeout(() => {
                this.handleDeviceClick(this.deviceList[0]);
            }, 1000);
        },
        methods: {
            handleDeviceClick(device){
                this.activeDevice=device.id;
                EventBus.$emit('set-multi-introduce', device.description);
                switch (device.id) {
                    case 'niaolei':
                        this.getNiaoLei();
                        break;
                    case 'binweizhiwu':
                        this.getZhenxizhiwu();
                        break;
                }
            },
            getZhenxizhiwu(){
                this.heatPoint={data:[],max:0};
                this.zhenxizhiwu.features.forEach(function(currentValue, index) {
                    that.heatPoint.data.push({
                        lng: currentValue.geometry.coordinates[0],
                        lat: currentValue.geometry.coordinates[1],
                        count: currentValue.properties.XJ
                    }) ;
                });
                this.heatPoint.max=this.getMaxValue(this.heatPoint.data);
                EventBus.$emit('sent-heat-map-data', this.heatPoint);
            },
            getNiaoLei(){
                this.heatPoint={data:[],max:0};
                if(this.myData){
                    this.myData.kml.Document.Folder.forEach(function(currentValue, index) {
                        // 执行的操作
                        for (let i = 0; i < currentValue.Folder.Placemark.length; i++) {
                            var p=currentValue.Folder.Placemark[i].Point.coordinates.split(',');
                            that.heatPoint.data.push({
                                lng: p[0],
                                lat: p[1],
                                count: p[2]
                            }) ;
                        }
                    });
                    this.heatPoint.max=this.getMaxValue(this.heatPoint.data);
                    const coordtransform = require('coordtransform');
                    that.heatPoint.data.forEach(function(currentValue, index) {
                        const result = coordtransform.wgs84togcj02(currentValue.lng, currentValue.lat);
                        that.heatPoint.data[index].lng=result[0];
                        that.heatPoint.data[index].lat=result[1];
                    });
                    EventBus.$emit('sent-heat-map-data', this.heatPoint);
                }
            },
            // 获取最大值用于热力图渲染
            getMaxValue(points) {
                if (!points || points.length === 0) return 100;

                let max = 0;
                points.forEach(point => {
                    if (point.count > max) max = point.count;
                });

                return max * 2; // 留一些余量
            },
        }
    }
</script>

<style lang="scss" scoped>
    .statistics-position-container{
        position: absolute;
        top: 54px;
        left:83px;
        z-index: 1000;
        pointer-events: auto;
        width: 79%;
    }
    .statistics-container {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .statistics-item {
            width: 90px;
            height: 65px;
            background: url('@/assets/img/species-statistics-bg.png') no-repeat center;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;

            .value {
                font-size: 24px;
                font-weight: bold;
                color: #07FFE5;
            }

            .label {
                font-size: 14px;
                margin-top: 4px;
            }
        }
    }

    .device-tabs {
        display: flex;
        gap: 10px;
        padding: 10px;
        position: relative;
        .tab-type {
            position: absolute;
            font-size: 9px;
            left: 15px;
            margin-top: 0;
            color: #ccc;
        }
    }

    .device-tab {
        width: 134px;
        height: 60px;
        pointer-events: auto;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        background: url('@/assets/img/species-center-tab-normal-bg.png') no-repeat center;
        background-size: 100% 100%;
        transition: all 0.3s ease;
        user-select: none;

        &.active {
            background-image: url('@/assets/img/species-center-tab-active-bg.png');
            color: #fff;
        }

        &:hover {
            color: #fff;
        }
        span{
            font-size: 18px;
            display: inline-block;
            margin-top: 24px;
        }
        div{
            font-size: 12px;
        }
    }
</style>
